blob: 362974df6a7033f30fa2a6e193061ab1c6efdd5c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
"use client"
import * as React from "react"
import { Shell } from "@/components/shell"
import { InformationButton } from "@/components/information/information-button"
import { VendorPoolVirtualTable } from "@/lib/vendor-pool/table/vendor-pool-virtual-table"
import { Skeleton } from "@/components/ui/skeleton"
import type { VendorPoolItem } from "@/lib/vendor-pool/table/vendor-pool-table-columns"
import { toast } from "sonner"
import { useTranslation } from "@/i18n/client"
import { useParams } from "next/navigation"
export default function VendorPoolPage() {
const [data, setData] = React.useState<VendorPoolItem[]>([])
const [isLoading, setIsLoading] = React.useState(true)
const params = useParams<{lng: string}>()
const lng = params?.lng ?? 'ko'
const {t} = useTranslation(lng, 'menu')
// 전체 데이터 로드
const loadData = React.useCallback(async () => {
setIsLoading(true)
try {
const response = await fetch('/api/vendor-pool/all')
if (!response.ok) {
throw new Error('Failed to fetch data')
}
const result = await response.json()
setData(result)
} catch (error) {
console.error('Failed to load vendor pool data:', error)
toast.error('데이터를 불러오는데 실패했습니다.')
} finally {
setIsLoading(false)
}
}, [])
// 초기 로드
React.useEffect(() => {
loadData()
}, []) // ✅ 빈 배열로 변경 - 마운트시에만 실행
// 새로고침 핸들러 - useRef를 사용하여 안정적인 참조 유지
const loadDataRef = React.useRef(loadData)
React.useEffect(() => {
loadDataRef.current = loadData
}, [loadData])
const handleRefresh = React.useCallback(() => {
loadDataRef.current()
}, []) // ✅ 빈 배열로 변경 - 함수 재생성 방지
return (
<Shell variant="fullscreen" className="gap-2 h-[calc(100vh-150px)]">
<div className="flex items-center justify-between space-y-2">
<div className="flex items-center justify-between space-y-2">
<div>
<div className="flex items-center gap-2">
<h2 className="text-2xl font-bold tracking-tight">
{t('menu.vendor_management.vendor_pool')}
</h2>
<InformationButton pagePath="evcp/vendor-pool" />
</div>
</div>
</div>
</div>
{isLoading ? (
<div className="space-y-4 flex-1 flex flex-col">
<Skeleton className="h-10 w-full" />
<Skeleton className="h-full w-full flex-1" />
</div>
) : (
<VendorPoolVirtualTable data={data} onRefresh={handleRefresh} />
)}
</Shell>
)
}
|
